<script lang="ts" setup>
import FormatFormVue from "@/Components/FormatForm.vue";
import MerchantCreateVue from "./Components/MerchantCreate.vue";
import MerchantUpdateVue from "./Components/MerchantUpdate.vue";

import { ref, reactive, onBeforeMount, watch } from "vue";
import { Action } from "element-plus";
import { Edit, Close, Plus } from "@element-plus/icons-vue";
import { GeneralStatusFilter, GeneralStatusTypeFilter } from "@/utils/filters";
import { MerchantApi } from "@/Api";

const form = reactive<Merchant.Search>({
   name: "",
   status: undefined
});

const formOptions = reactive<FormOptions<Merchant.Search>>({
   name: {
      type: "text",
      placeholder: "商户名称/代码"
   },
   status: {
      type: "select",
      value: "",
      placeholder: "商户状态",
      options: [
         { label: "开启", value: "OPEN" },
         { label: "关闭", value: "CLOSE" }
      ]
   }
});

const loading = reactive({
   table: false
});
const tableData = ref<Merchant.SearchResult[]>();
const actionValue = ref<Merchant.SearchResult>();
const showCreate = ref<boolean>(false);
const showUpdate = ref<boolean>(false);

async function submit(form: Merchant.Search) {
   loading.table = true;

   try {
      const { code, data } = await MerchantApi.Search(form);
      if (code == 200) {
         tableData.value = data;
      }
   } catch (error) {
      console.log("error", error);
   }

   loading.table = false;
}

function handlerCreate() {
   showCreate.value = true;
}
function handlerUpdate(data: Merchant.SearchResult) {
   actionValue.value = data;
   showUpdate.value = true;
}
function handlerDelete(data: Merchant.SearchResult) {
   try {
      ElMessageBox.confirm(`确认删除商户: <strong>${data.name}</strong>?`, "警告", {
         confirmButtonText: "确定",
         dangerouslyUseHTMLString: true,
         type: "warning",
         callback: async (action: Action) => {
            if (action === "confirm") {
               const { code } = await MerchantApi.Delete({ id: data.id });
               if (code === 200) {
                  ElMessage.success("删除成功");
                  await submit(form);
               }
            }
         }
      });
   } catch (error) {
      console.log("error", error);
   }
}

watch([showCreate, showUpdate], value => {
   if (!value[0] || !value[1]) submit(form);
});

onBeforeMount(() => {
   submit(form);
});
</script>

<template>
   <div class="page">
      <FormatFormVue :form="form" :form-options="formOptions" @submit="submit">
         <template #button>
            <el-button :icon="Plus" type="primary" @click="handlerCreate">添加商户</el-button>
         </template>
      </FormatFormVue>

      <div class="tabBox shadowCard">
         <el-table
            v-loading="loading.table"
            :data="tableData"
            stripe
            border
            highlight-current-row
            empty-text="暂无数据"
            tooltip-effect="dart"
            row-key="id">
            <el-table-column prop="name" label="商户简称" />
            <el-table-column prop="code" label="商户代码" />
            <el-table-column prop="cert" label="证书名称" show-overflow-tooltip />
            <el-table-column prop="cert_key" label="密钥名称" show-overflow-tooltip />
            <el-table-column prop="serial_no" label="证书序列号" show-overflow-tooltip />
            <el-table-column prop="apiv2" label="APIV2" />
            <el-table-column prop="apiv3" label="APIV3" />
            <el-table-column prop="status" label="商户状态" width="85">
               <template #default="{ row }: { row: Merchant.SearchResult }">
                  <el-tag :type="GeneralStatusTypeFilter[row.status]">
                     {{ GeneralStatusFilter[row.status] }}
                  </el-tag>
               </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="145">
               <template #default="{ row }: { row: Merchant.SearchResult }">
                  <el-link :icon="Edit" type="primary" @click="handlerUpdate(row)">编辑</el-link>
                  <el-link :icon="Close" type="danger" @click="handlerDelete(row)">删除</el-link>
               </template>
            </el-table-column>
         </el-table>
      </div>

      <MerchantCreateVue v-model="showCreate" />
      <MerchantUpdateVue v-model="showUpdate" :data="actionValue" />
   </div>
</template>

<style lang="scss" scoped>
.page {
   width: 100%;
   height: 100%;
   display: flex;
   flex-flow: column nowrap;
}

.tabBox {
   flex: 1;
   width: 100%;
   position: relative;
   padding: 15px;
   z-index: 4;
   .el-table {
      position: absolute;
      width: calc(100% - 30px);
      height: calc(100% - 30px);
   }
}

.el-link {
   margin-inline: 5px;
}
</style>
